<template>
	<view>
		<view class="cu-card case" :class="isCard?'no-card':''" v-for="item in collectList" :key="item.id">
			<view class="cu-item shadow" >
				<view class="image" style="height: 300px;" @tap="todetail(item.id,item.userId)">
					<image :src="item.ai[0].url"
					 mode="aspectFill" style="height: 300px;"></image>
					<view class="cu-bar bg-shadeBottom"> <text class="text-cut">{{item.activityDesc}}</text></view>
				</view>
				<view class="cu-list menu-avatar">
					<view class="cu-item" @tap="todetail(item.id,item.userId)">
						<view class="cu-avatar round lg" style="background-image:url(https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png);"></view>
						<view class="content flex-sub">
							<view class="text-grey">{{'名称:'+item.activityName}}</view>
							<view class="text-gray text-sm flex justify-between">
								{{item.activityDate}}
								<view class="text-gray text-sm">
									参与情况：{{item.tookNumber + '/' + item.limitNumber}}
								</view>
							</view>
						</view>
					</view>
					<view style="display: flex;flex-direction: row;">
						<button class="btn" plain='true' @click="getid(item.id)" data-target="DialogModal2">取消收藏</button>
					</view>
				</view>
			</view>
		</view>
		<view v-if="this.collectList.length == 0" style="width: 100%; padding: 20px 0 0 0;text-align: center;">
			<text style="font-size: 18px;">暂时还没有收藏过活动哟</text>
		</view>
		
		<view class="cu-modal" :class="modalName=='DialogModal2'?'show':''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view class="content">提醒</view>
					<view class="action" @tap="hideModal">
						<text class="cuIcon-close text-red"></text>
					</view>
				</view>
				<view class="padding-xl">
					亲，确定要取消吗？
				</view>
				<view class="cu-bar bg-white">
					<view class="action margin-0 flex-sub text-green " @tap="hideModal">
						<view class="action margin-0 flex-sub text-green solid-right" @tap="hideModal">算了</view>
					</view>
					<view class="action margin-0 flex-sub  solid-left" style="color: red;" @tap="cardelete">确定</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				collect:[],
				collectList:[],
				isCard: false,
				modalName: null,
				id:'',
				userId: '',
				Authorization: ''
			}
		},
		onLoad(option) {
			this.userId = option.userId
			this.Authorization = option.Authorization
		},
		methods: {
			cardelete() {
				let that = this
					uni.request({
						url: 'http://101.37.15.60:8080/collects/?activityId='+that.id+'&userId='+that.userId,
						method: 'POST',
						header: {
							'Authorization': 'Bearer '+that.Authorization
						},
						success: (res) => {
							uni.showToast({
							    title: '取消成功！',
							    duration: 500
							})
							window.localStorage.setItem('收藏'+that.id, JSON.stringify(false))
							that.modalName = null
							setTimeout(function() {
								location.reload()
							},600)
						}
					})
			},
			getid(id) {
				this.modalName = 'DialogModal2'
				this.id = id
			},
			hideModal(e) {
				this.modalName = null
			},
			getlocal() {
				for (var i = 0; i < localStorage.length; i++) {
				    var key = localStorage.key(i); //获取本地存储的Key
					let name = key.substr(0, 2)
					let value = localStorage.getItem(key)
					if(name == '收藏' && value == 'true') {
						this.collect.push(key.substr(2))
					}
				    // console.log(localStorage.getItem(key));//所有value
				}
				for(let i = 0;i<this.collect.length;i++) {
					uni.request({
					    url: 'http://101.37.15.60:8080/activity/selectById', //仅为示例，并非真实接口地址。
					    data: {
					        id: this.collect[i]
					    },
					    success: (res) => {
							this.collectList.push(res.data.data[0])
					    }
					});
				}
			},
			todetail(activityid,userID) {
				let ismine
				if(userID == this.id) {
					ismine = true
					uni.navigateTo({
						url: '../../activitydeatil/activitydeatil?activityid='+activityid+'&ismine='+ismine,
					    success: res => {}
					});
				}else{
					ismine = false
					uni.navigateTo({
						url: '../../activitydeatil/activitydeatil?activityid='+activityid+'&ismine='+ismine,
					    success: res => {}
					});
				}
			},
		},
		mounted() {
			this.getlocal()
		}
	}
</script>

<style scoped>
	.btn {
		border: #EEEEEE 1px solid;
		color: rgb(239, 109, 89);
		width: 100%;
	}
</style>
